<template>
    <div>
        <div class="search-bar">
            <div class="search">
                <input v-model="search" type="text" placeholder="Montagne jeunesse" />
                <span class="icon icon-search"></span>
            </div>
        </div>

        <div class="content">
            <div class="side-bar">
                <a href="javascript:;" class="item on">母婴专区</a>
                <a href="javascript:;" class="item">美妆护肤</a>
                <a href="javascript:;" class="item">家居生活</a>
                <a href="javascript:;" class="item">食品营养</a>
                <a href="javascript:;" class="item">全球直邮</a>
            </div>
            <div class="pro-list">
                <a href="javascript:;" class="item">
                    <img src="../img/product-pic1.jpg" alt="product">
                    <h3>奶粉</h3>
                </a>
                <div class="item">
                    <img src="../img/product-pic1.jpg" alt="product">
                    <h3>奶粉</h3>
                </div>
                <div class="item">
                    <img src="../img/product-pic1.jpg" alt="product">
                    <h3>奶粉</h3>
                </div>
                <div class="item">
                    <img src="../img/product-pic1.jpg" alt="product">
                    <h3>奶粉</h3>
                </div>
                <div class="item">
                    <img src="../img/product-pic1.jpg" alt="product">
                    <h3>奶粉</h3>
                </div>
                <div class="item">
                    <img src="../img/product-pic1.jpg" alt="product">
                    <h3>奶粉</h3>
                </div>
                <div class="item">
                    <img src="../img/product-pic1.jpg" alt="product">
                    <h3>奶粉</h3>
                </div>
                <div class="item">
                    <img src="../img/product-pic1.jpg" alt="product">
                    <h3>奶粉</h3>
                </div>
                <div class="item">
                    <img src="../img/product-pic1.jpg" alt="product">
                    <h3>奶粉</h3>
                </div>
                <div class="item">
                    <img src="../img/product-pic1.jpg" alt="product">
                    <h3>奶粉</h3>
                </div>
                <div class="item">
                    <img src="../img/product-pic1.jpg" alt="product">
                    <h3>奶粉</h3>
                </div>
                <div class="item">
                    <img src="../img/product-pic1.jpg" alt="product">
                    <h3>奶粉</h3>
                </div>
            </div>
        </div>

        <!-- <div class="menu-bar">
            <router-link to="home">
                <span class="icon icon-menus"></span>
                <h4>首页</h4>
            </router-link>
            <router-link to="classify">
                <span class="icon icon-menus"></span>
                <h4>分类</h4>
            </router-link>
            <router-link to="shopcart">
                <span class="icon icon-menus"></span>
                <h4>购物车</h4>
            </router-link>
            <router-link to="user">
                <span class="icon icon-menus"></span>
                <h4>我</h4>
            </router-link>
        </div> -->
        <MenuBar></MenuBar>
    </div>
</template>

<script>
// import MenuBar from '../components/menuBar'
export default {
  name: "ClassifyPage",
  data() {
    return {
      search: ""
    };
  },
  components:{
    //   MenuBar,
  }
};
</script>

<style scoped lang="less">
@import "../style/classify.less";
</style>